<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f7f7f7;
            color: #333;
        }
        .container {
            max-width: 750px;
            margin: 0 auto;
            padding-bottom: 80px;
        }
        .avatar-upload {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #eee;
            overflow: hidden;
        }
        .avatar-upload input {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        .avatar-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .edit-icon {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 24px;
            height: 24px;
            background-color: #ff4d4f;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        .info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background-color: white;
            border-bottom: 1px solid #eee;
        }
        .info-item:last-child {
            border-bottom: none;
        }
        .section-title {
            padding: 10px 15px;
            font-size: 14px;
            color: #999;
        }
        .address-item, .contact-item {
            background-color: white;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 8px;
            position: relative;
        }
        .default-tag {
            position: absolute;
            top: 15px;
            right: 15px;
            background-color: #ff4d4f;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
        }
        .action-buttons {
            display: flex;
            position: fixed;
            bottom: 0px;
            left: 0;
            right: 0;
            padding: 0 15px;
            background-color: #f7f7f7;
        }
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #999;
        }
        .tab-item.active {
            color: #ff4d4f;
        }
        .nav-tab.active {
            color: #1890ff;
            position: relative;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background: #1890ff;
            border-radius: 2px;
        }
        .tab-icon {
            font-size: 22px;
            margin-bottom: 3px;
        }
        .tab-text {
            font-size: 12px;
        }
        .edit-input {
            border: 1px solid #eee;
            padding: 5px 10px;
            border-radius: 4px;
            width: 60%;
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <div class="flex items-center justify-between p-4 bg-white">
            <button class="text-gray-600" onclick="history.back()">
                <i class="fas fa-chevron-left"></i>
            </button>
            <h1 class="text-lg font-medium">个人资料</h1>
            <div style="width: 24px;"></div>
        </div>

        <!-- 用户信息区 -->
        <div class="bg-white p-4 mb-4">
            <div class="flex items-center">
                <div class="avatar-upload mr-4">
                    <img id="avatarPreview" src="https://s.coze.cn/image/F1hr__fLhMw/" class="avatar-preview">
                    <input type="file" id="avatarInput" accept="image/*">
                    <div class="edit-icon">
                        <i class="fas fa-camera"></i>
                    </div>
                </div>
                <div class="flex-1">
                    <div class="flex items-center mb-2">
                        <h2 class="text-lg font-medium mr-2" id="username">张女士</h2>
                        <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">已认证</span>
                    </div>
                    <p class="text-gray-500">138****1234</p>
                </div>
            </div>
        </div>

        <!-- 个人信息编辑区 -->
        <div class="section-title">个人信息</div>
        <div class="bg-white rounded-lg overflow-hidden mb-4">
            <div class="info-item">
                <span>真实姓名</span>
                <input type="text" class="edit-input" value="张美丽" id="realName">
            </div>
            <div class="info-item">
                <span>性别</span>
                <div class="flex items-center">
                    <label class="mr-4"><input type="radio" name="gender" value="male" class="mr-1">男</label>
                    <label><input type="radio" name="gender" value="female" checked class="mr-1">女</label>
                </div>
            </div>
            <div class="info-item">
                <span>出生日期</span>
                <input type="date" class="edit-input" value="1990-05-15" id="birthday">
            </div>
        </div>

        <!-- 地址管理区 -->
        <div class="section-title">我的地址</div>
        <div class="px-4 mb-4">
            <button class="w-full py-3 bg-white rounded-lg text-center text-gray-600 border border-dashed border-gray-300 mb-4">
                <i class="fas fa-plus mr-2"></i>添加新地址
            </button>
            
            <div class="address-item">
                <div class="default-tag">默认</div>
                <div class="flex items-center mb-2">
                    <span class="font-medium mr-2">张美丽</span>
                    <span>138****1234</span>
                </div>
                <p class="text-gray-600 mb-2">北京市朝阳区建国路88号SOHO现代城C座1806室</p>
                <div class="flex justify-end space-x-4 text-sm">
                    <button class="text-blue-500">编辑</button>
                    <button class="text-red-500">删除</button>
                </div>
            </div>
            
            <div class="address-item">
                <div class="flex items-center mb-2">
                    <span class="font-medium mr-2">张美丽</span>
                    <span>138****1234</span>
                </div>
                <p class="text-gray-600 mb-2">上海市浦东新区陆家嘴环路1000号恒生银行大厦32楼</p>
                <div class="flex justify-end space-x-4 text-sm">
                    <button class="text-blue-500">编辑</button>
                    <button class="text-red-500">删除</button>
                    <button class="text-gray-500">设为默认</button>
                </div>
            </div>
        </div>

        <!-- 紧急联系人区 -->
        <div class="section-title">紧急联系人</div>
        <div class="px-4 mb-4">
            <button class="w-full py-3 bg-white rounded-lg text-center text-gray-600 border border-dashed border-gray-300 mb-4">
                <i class="fas fa-plus mr-2"></i>添加联系人
            </button>
            
            <div class="contact-item">
                <div class="flex items-center mb-2">
                    <span class="font-medium mr-4">李强</span>
                    <span>丈夫</span>
                </div>
                <p class="text-gray-600 mb-2">139****5678</p>
                <div class="flex justify-end space-x-4 text-sm">
                    <button class="text-blue-500">编辑</button>
                    <button class="text-red-500">删除</button>
                </div>
            </div>
            
            <div class="contact-item">
                <div class="flex items-center mb-2">
                    <span class="font-medium mr-4">王芳</span>
                    <span>母亲</span>
                </div>
                <p class="text-gray-600 mb-2">136****9012</p>
                <div class="flex justify-end space-x-4 text-sm">
                    <button class="text-blue-500">编辑</button>
                    <button class="text-red-500">删除</button>
                </div>
            </div>
        </div>

        <!-- 底部操作按钮 -->
        <div class="action-buttons py-4">
            <button class="flex-1 bg-red-500 text-white py-3 rounded-lg mr-2">保存修改</button>
            <button class="flex-1 bg-white text-gray-600 py-3 rounded-lg border border-gray-300">退出登录</button>
        </div>

        <!-- 底部导航 -->
    </div>

    <script>
        // 头像上传处理
        document.getElementById('avatarInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    document.getElementById('avatarPreview').src = event.target.result;
                };
                reader.readAsDataURL(file);
            }
        });

        // 输入框失去焦点自动保存
        const inputs = document.querySelectorAll('.edit-input');
        inputs.forEach(input => {
            input.addEventListener('blur', function() {
                // 这里可以添加保存逻辑
                console.log(`保存 ${this.id}: ${this.value}`);
            });
        });

        // 底部导航切换
        const tabItems = document.querySelectorAll('.tab-item');
        tabItems.forEach(item => {
            item.addEventListener('click', function() {
                tabItems.forEach(tab => tab.classList.remove('active'));
                this.classList.add('active');
            });
        });

        // 地址和联系人操作
        document.querySelectorAll('.address-item button, .contact-item button').forEach(button => {
            button.addEventListener('click', function() {
                const action = this.textContent.trim();
                const item = this.closest('.address-item, .contact-item');
                console.log(`${action} ${item.querySelector('.font-medium').textContent}`);
                
                if (action === '删除') {
                    item.remove();
                } else if (action === '设为默认') {
                    document.querySelectorAll('.default-tag').forEach(tag => tag.remove());
                    const defaultTag = document.createElement('div');
                    defaultTag.className = 'default-tag';
                    defaultTag.textContent = '默认';
                    item.insertBefore(defaultTag, item.firstChild);
                }
            });
        });

        // 添加地址/联系人按钮
        document.querySelectorAll('button:has(.fa-plus)').forEach(button => {
            button.addEventListener('click', function() {
                const section = this.closest('div').querySelector('.section-title').textContent;
                console.log(`添加新的${section}`);
            });
        });

        // 保存修改按钮
        document.querySelector('.action-buttons button:first-child').addEventListener('click', function() {
            alert('修改已保存');
        });

        // 退出登录按钮
        document.querySelector('.action-buttons button:last-child').addEventListener('click', function() {
            if (confirm('确定要退出登录吗？')) {
                alert('已退出登录');
                // 这里可以添加退出登录逻辑
            }
        });
    </script>
</body>
</html>